<template>
  <div id="writePost">
    <div class="top">
      <div class="write-title">
        <input type="text" name="title" v-model="title" id="title" placeholder="请输入帖子标题···" autocomplete="off">
      </div>
      <div class="util">
        <div class="user-head">
          <img class="user-head-img" src="../../assets/img/user/userHead.png" alt="用户头像">
        </div>

        <el-dropdown trigger="click" :hideOnClick="right">
          <span class="el-dropdown-link">
            发布<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
              <div class="post-class">
                <p>选择类型</p>
                <ul class="class-items">
                  <li class="item" @click="postClass='sharePost'" :class="{class_active : postClass === 'sharePost'}">经验帖</li>
                  <li class="item" @click="postClass='helpPost'" :class="{class_active : postClass === 'helpPost'}">问题贴</li>
                </ul>
              </div>
              <div class="post-class">
              <p>选择类型</p>
              <ul class="class-items">
                <li class="item" @click="classClass='sharePost'" :class="{class_active : classClass === 'sharePost'}">经验帖</li>
                <li class="item" @click="classClass='helpPost'" :class="{class_active : classClass === 'helpPost'}">问题贴</li>
              </ul>
            </div>
              <div class="tag-box">
              <div class="sub-title">标签</div>
              <div class="category-list">
                <div class="item" v-for="item in userSelectTag" :data-value="item" @click="delUserSelTag">{{item}}</div>
              </div>
              <div class="tag-input tag-input">
                 <input type="text" placeholder="搜索标签（可选填）" class="input" @input="searchByInput" v-model="inputTag">
                <ul class="suggested-tag-list" v-show="matchTag.length !== 0">
                  <li v-for="item in matchTag" :key="item" @click="selectTag" :data-value="item">{{item}}</li>
                </ul>
              </div>
            </div>
              <div class="button" @click="setJson">确认发布</div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="write-content">
      <froala v-model="content" :config="config"></froala>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'writePost',
    props : {
      // 问题贴，经验帖
      getPostClass : {
        default : 'sharePost',
        type : String
      }
    },
    data () {
      return {
        json:{},
        // 用于存放标题
        title:'',
        // 用于存放编辑的内容
        content: '<span style="color:gray;">开始你的分享吧！</span>',
        // 存放帖子类型
        postClass : this.getPostClass,
        // 存放课程分类
        classClass : "",
        // 存放用户选中的标签
        userSelectTag : [],
        config : {
          height : 500,
          // 代理服务器，用于读取由URL插入的图像并将其上载到自定义服务器。默认情况下，我们提供托管在我们服务器上的代理，但是为了完全控制，我们建议您使用CORS Anywhere中的详细信息来设置您自己的代理',
          /*imageCORSProxy : 'https://nzq.com',*/
          // 上传方式
          imageUploadMethod : 'POST',
         /* imageUploadRemoteUrls: '将通过URL插入的图像上载到自定义服务器，而不是通过URL链接它们。'*/
          /*imageUploadRemoteUrls: 'https://nzq.com',*/
          // 这里填地址
          imageUploadURL: 'http://i.froala.com/upload',
          imageManagerDeleteMethod :'DELETE',
          imageManagerDeleteURL :'http : //example.com/delete_image',
          fileUploadMethod: 'POST',
          fileUploadURL: 	'http://i.froala.com/upload'
    },
        // 绑定用户表单里的输入 tag
        inputTag : '',
        // 现有的所有标签
        allTag : ["前端","后端","全栈"],
        // 根据用户输入的匹配的tag
        matchTag : [],
        right : true,
      }
    },mounted() {
      // 去上面的航线
      document.querySelector(".fr-toolbar .fr-separator.fr-hs").style.display = 'none';
      //fr-wrapper
    },
    methods : {
      setJson : function () {
        this.json.dynamic_name = this.title;
        this.json.dynamic_content = this.content;
        this.json.dynamic_type = this.postClass;
        this.json.course_name = this.classClass;
/*        this.json.userSelectTag = this.userSelectTag;*/
        let json = JSON.stringify(this.json)
        this.$http('POST','dynamic/id.action?dynamic_id=233').then(function (res) {
          console.log(res);
        })
      },
      searchByInput : function () {
        let a = [];
        let all = this.allTag;
        let inputTag = this.inputTag;
        for (let index in all) {
          if (inputTag !== '' && inputTag !==undefined &&all[index].indexOf(inputTag)>=0) {
              a.push(all[index]);
          }
        }
        this.matchTag = a;
      },
      // 根据相应的标签
      selectTag : function (event) {
        let value = event.target.dataset.value;
        if (this.userSelectTag.indexOf(value) === -1) {
          this.userSelectTag.push(event.target.dataset.value);
        }
      },
      // 删除相应的标签
      delUserSelTag : function (event) {
        let index = this.userSelectTag.indexOf(event.target.dataset.value);
        this.userSelectTag.splice(index,1)
      },
    }
  }
</script>

<style scoped>
@import "../../assets/css/writePost/index.css";
@import "../../assets/css/writePost/writePostPage.css";

#writePost {
  width: 100%;
  position: relative;
}
.top {
  background-color: white;
  overflow: hidden;
  width: 900px;
  height: 60px;
  border-bottom: 1px solid #ddd;
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 0 20px;
  box-sizing: border-box;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.16);
}
.write-title{
  float: left !important;
}
.util {
  width: 30%;
  float: right;
}
.write-title{
  width: 30%;
  height: 60px;
}
.write-title input {
  top: 0;
  width: 30%;
  font: 25px/70px "simhei";
  font-weight: bold;
}

  .write-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 900px;
    left: 50%;
    margin-top:5px ;
    transform: translateX(-50%);
    position: absolute;
  }

  .util>div {
    float: right;
  }

  .util .user-head img.user-head-img {
    width: 40px;
    height: 40px;
    margin: 10px 40px;
  }

  .el-dropdown {
    color: #068bff;
    margin-top: 20px;
  }
  .el-dropdown:hover {
    cursor: pointer;
    color: #0572d0;
  }
  /* 计数的东西 */
.fr-counter {

}


.fr-toolbar .fr-separator.fr-hs  {
  display: none !important;
  border-color: red;
}


.el-dropdown-menu.el-popper {
  padding: 10px;
}
.post-class {
  width: 250px;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.post-class>p{
  font: 18px/30px "simhei";
  color: #747474;
  padding-bottom: 5px;
}

.class-items {
  width: 100%;
}
.item {
  height: 25px;
  width: fit-content;
  padding:0 10px;
  line-height: 25px;
  display: inline-block;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #f1f1f1;
  border-radius: 2px;
  cursor: pointer;
  color: #747474;
}

.item:hover {
  color: #007fff;
  border-color: rgba(0,127,255,.15);
  background-color: rgba(0,127,255,.05);
}
.item.class_active {
  color: #007fff;
  border-color: rgba(0,127,255,.15);
  background-color: rgba(0,127,255,.05);
}

/* 标签 */
.el-dropdown>span {
  display: block;
  background-color: rgb(8, 116, 223);
  padding: 5px 9px;
  border-radius: 2px;
  color: white;
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
  transform: translateY(-4px);
}
.el-dropdown>span:hover {
  background-color: rgba(9, 134, 255, 0.89);
}
.sub-title {
  font: 18px/30px "simhei";
  color: #747474;
  padding-bottom: 5px;
}
.category-list{
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f1f1;
}
.category-list>div{
  margin-right: 10px;
}
.tag-input input {
  border: none;
  background: none;
  outline: none;
  margin-top: 20px;
  border-bottom: 1px solid #cccccc;
  width: 100%;
}
.suggested-tag-list {
  width: 100px;
  background-color: #f9f9f9;
  border: 1px solid gray;
  border-top: none;
  -webkit-border-radius: 0 0 2px 2px;
  -moz-border-radius: 0 0 2px 2px;
  border-radius: 0 0 2px 2px;
  padding: 5px 0;
}
.suggested-tag-list li {
  padding: 0 5px 5px 5px;
}
.suggested-tag-list li:hover {
  background-color: #e8e8e8;
  cursor: pointer;
}

.el-dropdown-menu .button {
  height: 28px;
  margin: 30px 0 10px 0;
  left: 50%;
  line-height: 28px;
  width: fit-content;
  -webkit-transform: translateX(89px);
  -moz-transform: translateX(89px);
  -ms-transform: translateX(89px);
  -o-transform: translateX(89px);
  transform: translateX(89px);
  background-color: rgba(9, 134, 255, 0.76);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding:0 8px;
  color: white;
  font-size: 14px;
}
.el-dropdown-menu .button:hover {
  cursor: pointer;
  background-color: rgba(9, 134, 255, 0.89);
}

</style>
